<template>
	<view class="zh-pay-add">
		<u-form>
			<u-input title="付款金额" type="digit" placeholder="填写金额数字" v-model="payData.form.subtotal" labelWidth="160" :rules="payData.rules.subtotal">
				<template v-slot:icon>
					<view @click.stop="copySubtotal(waitPay)" class="font-1769ff font-28">复制待付</view>
				</template>
			</u-input>
			<u-select title="付款日期" placeholder="请选择付款日期" @click="pickPaymentdate" :value="payData.form.paymentdate" labelWidth="160" :rules="payData.rules.paymentdate"></u-select>
			<u-select title="付款方式" placeholder="请选择付款方式" @click="pickPaymentmode" :value="payData.paymentmodeName" labelWidth="160" :rules="payData.rules.paymentmode"></u-select>
			<u-select title="付款人" placeholder="请选择付款人" :arrow="false" :value="payData.payingcompanyName" labelWidth="160"></u-select>
			<u-select title="收款人" placeholder="请选择收款人" :arrow="false" :value="payData.receivingcompanyName" labelWidth="160"></u-select>
			<u-upload title="上传凭证" :max="1" text="上传凭证" :urls="getFiles" @click="uploadFile" @delOne="delFile" @clickItem="clickFile"></u-upload>
		</u-form>
		<view class="bottom-fixed">
			<button class="app-primary-button" hover-class="app-primary-button-active" @click="save">确定</button>
		</view>
		<u-date-picker :date="nowDate" title="选择付款日期" :show="payData.showPaymentdate" @change="selectPaymentdate" @close="changePaymentdate"></u-date-picker>
		<action-sheet :show="payData.showPaymentmode" :list="payData.paymentModeList" @change="selectPickPaymentmode" @close="changePickPaymentmode"></action-sheet>
		<imgs-preview :imgs="generalImgs.fileImgs" :show="generalImgs.show" :current="generalImgs.index" @close="changeFileImgShow"></imgs-preview>
	</view>
</template>

<script setup lang="ts">
	import { computed, reactive, ref } from 'vue'
	import { order } from '@/api'
	import { tip,util } from '@/utils'
	import { Paymentmode } from '@/enum/order'
	import { onLoad } from '@dcloudio/uni-app';
	
	const date = new Date()
	const nowDate = ref(util.getDate(date, 'stamp'))
	const waitPay: any = ref(0)
	const payData: any = reactive({
		rules: {
			subtotal:[{required:true,message:'请输入付款金额！'}],
			paymentdate:[{required:true,message:'请输入付款日期！'}],
			paymentmode:[{required:true,message:'请输入付款方式！'}]
		},
		form: {
			id: "",
			orderid: "",
			payingcompany: "",
			paymentdate: "",
			paymentmode: Paymentmode.offline,
			paymentvoucher: "",
			receivingcompany: "",
			remark: "",
			subtotal: "",
		},
		showPaymentdate:false,
		showPaymentmode: false,
		paymentModeList: [{
			value:Paymentmode.online,
			text:'线上转账'
		}, {
			value:Paymentmode.offline,
			text:'线下转账'
		}],
		paymentmodeName:'',
		receivingcompanyName:'',
		payingcompanyName:''
	})
	
	const generalImgs:any = reactive({
		show:false,
		fileImgs:[],
		index:0
	})
	
	const getFiles = computed(() => {
		const files = []
		if(payData.form.paymentvoucher) {
			files.push(previewImg(payData.form.paymentvoucher))
		}
		return files
	}) 
	
	onLoad((options:any) => {
		const info = util.getObjParams(options.info)
		payData.form = {
			...payData.form,
			...info,
		}
		payData.paymentmodeName = info.paymentmode == Paymentmode.online?'线上转账':'线下转账'
		payData.receivingcompanyName = options.receivingCompanyName
		payData.payingcompanyName = options.payingCompanyName
		waitPay.value = options.waitPay || 0
		generalImgs.fileImgs = [previewImg(info.paymentvoucher)]
	})
	
	const payAdd = () => {
		if(!payData.form.subtotal) return tip.showToast('请输入付款金额')
		if(!payData.form.payingcompany) return tip.showToast('没有付款人')
		if(!payData.form.receivingcompany) return tip.showToast('没有收款人')
		if(!payData.form.paymentdate) return tip.showToast('请输入付款日期')
		if(!payData.form.paymentmode) return tip.showToast('请输入付款方式')
		if(payData.form.subtotal - waitPay.value > 0) return tip.showToast('输入的金额不能大于待付金额')
		if(payData.form.subtotal === 0) return tip.showToast('请输入大于0的金额')
		
		order.setPayAdd(payData.form).then((res: any) => {
			const data = res.data
			tip.showToast('保存成功！')
			uni.$emit('payAdd', data)
			uni.navigateBack({delta:1})
		})
	}
	
	const copySubtotal = (value:number) => {
	    uni.setClipboardData({
	        data: value.toString() , // 剪贴板数据
	        success: (res:any) => {
	            uni.getClipboardData({
	                success:(res1:any) => {
	                    console.log(res1)
						payData.form.subtotal = value
	                }
	            })
	        }
	    });
	  }
	const payEdit = () => {
		if(!payData.form.subtotal) return tip.showToast('请输入付款金额')
		if(!payData.form.payingcompany) return tip.showToast('没有付款人')
		if(!payData.form.receivingcompany) return tip.showToast('没有收款人')
		if(!payData.form.paymentdate) return tip.showToast('请输入付款日期')
		if(!payData.form.paymentmode) return tip.showToast('请输入付款方式')
		
		order.setPayEdit(payData.form).then((res: any) => {
			tip.showToast('修改成功！')
			uni.$emit('payEdit')
			uni.navigateBack({delta:1})
		})
	}
	
	const save = () => {
		if(payData.form.id) {
			payEdit()
		} else {
			payAdd()
		}
	}

	
	const pickPaymentdate = () => {
		changePaymentdate()
	}
	
	const changePaymentdate = () => {
		payData.showPaymentdate = !payData.showPaymentdate
	}
	
	const selectPaymentdate = (data:any) => {
		payData.form.paymentdate = data
		changePaymentdate()
	}
	
	const pickPaymentmode = () => {
		changePickPaymentmode()
	}
	
	const changePickPaymentmode = () => {
		payData.showPaymentmode = !payData.showPaymentmode
	}
	
	const selectPickPaymentmode = (data:any) => {
		payData.form.paymentmode = data.value
		payData.paymentmodeName = data.text
		changePickPaymentmode()
	}
	
	const uploadFile = (data: any) => {
		generalImgs.fileImgs = [previewImg(data.url)]
		payData.form.paymentvoucher = data.url
	}
	
	const clickFile = (index:number) => {
		changeFileImgShow()
	}
	
	const delFile = (index:number) => {
		payData.form.paymentvoucher = ""
		generalImgs.fileImgs = []
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
	const changeFileImgShow = () => {
		generalImgs.show = !generalImgs.show
	}

</script>

<style lang="scss" scoped>
	.zh-pay-add {
		.bottom-btn {
			margin-top:125rpx;
		}
	}
</style>


